<template>
  <div class="mog_cog">
    <el-upload
      class="upload-demo"
      ref="upload"
      :action="urlPath"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      multiple
      :headers="headers"
      :auto-upload="false"
      :limit="maxCount"
      :list-type="getype"
      :on-exceed="handleExceed"
      :on-change="beforeUpload"
      :on-success="submitSuccess"
      :on-error="submitError"
      :file-list="fileList">
      <i v-if="getype =='picture-card'" class="el-icon-plus"></i>
      <el-button v-if="getype !='picture-card'" slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button v-if="getype !='picture-card'" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
    </el-upload>
    <el-button v-if="getype =='picture-card'" class="submit-btn"  size="small" type="success" @click="submitUpload">上传到服务器</el-button>
  </div>
</template>
<script>
  export default {
    props: {
      value: Array,
      url: String,
      quality: Number,
      modelName: String,
      maxCount: {
        type: Number,
        default: 1
      },
      header: Object,
      type: String
    },

    data() {
      return {
        files: [],

      }
    },
    computed: {
      fileList() {
        let fileList = [];
        for (let i = 0; i < this.value.length; i++) {
          fileList.push({name: this.value[i].split("/")[3], url: this.value[i]});
        }
        return fileList;
      },
      urlPath() {
        var url = this.url+"?"
        if (this.modelName) {
          url +=  "moduleName=" + this.modelName
        }
        if (this.modelName && this.quality) {
          url += "&quality=" + this.quality
        }else {
          url += "quality=" + this.quality
        }
        return url;
      },
      headers(){
        if (this.header){
          return this.header
        }else {
         var header = {
           'token': this.$cookie.get('token'),
         }
         return header
        }
      },
      getype(){
        if (this.type){
          return this.type
        } else {
          return 'text'
        }
      }
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 ${this.maxCount} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`);
      },
      beforeUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 5
        if (!isLt2M) {
          this.$message.warning('上传模板大小不能超过 5MB!')
          return
        }

        this.files.push(file)
      },
      submitUpload() {
        this.$refs['upload'].submit()
      },
      submitSuccess(response, file, fileList){
        this.$emit("handelSuccess", response)
      },
      submitError(err, file, fileList){
          this.$emit("handelError", err)
      }
    }
  }
</script>
<style scoped>
  .mog_cog{
    display: inline-flex;
    position: absolute;
  }
  .submit-btn{
    width: 100px;
    height: 30px;
    position: relative;
    margin-left: 30px;
    margin-top: 120px;
  }
  .upload-demo{
    flex: 10;
  }
</style>
